<docs>
  ##
</docs>
<template>
  <div class="index" ref="index" :style="{minHeight: winHeight}">
    <div class="container home">
      <div class="header">
        <h3 class="title">首页</h3>
      </div>
      <div :class="`content ${newObj.rq ? '':'con_lastH'}`">
        <div class="conTitle">就业失业服务</div>
        <div class="conTxt">
          <span>提示：</span>请您在办理就业失业相关业务时，务必确保填写的个人基本信息、就业失业信息等数据准确有效，以保障您办理的相关业务的权益。
        </div>
        <div class="readOnly">
          <van-checkbox v-model="checked" checked-color="#07c160">已阅读并同意</van-checkbox>
        </div>
        <div :class="`uerCar ${newObj.rq ? '':'car_lastH'}`">
          <div class="item_left">
            <p class="name">{{user.xm}}</p>
            <p class="car">{{user.zjhm}}</p>
            <p class="phone">{{user.sjhm}}</p>
            <p class="newData overflow" v-if="newObj.rq">最新办理记录：{{newObj.rq}} {{newObj.jsyzt}}</p>
          </div>
          <div class="item_right"></div>
        </div>
      </div>
      <div class="cont_link">
        <div class="cont_title">业务功能</div>
        <div :class="`cont_item${i+1}`" v-for="(item, i) in data" :key="i">
          <p class="clearfix">
            <span>{{data[i]}}</span>
            <span class="rightAway" @click="link(data[i])">马上办理</span>
          </p>
          <span class="linkList" @click="search(i+1)">查询</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { sessionStorageSetItem, sessionStorageGetItem } from "common/js/utils";
export default {
  name: "index",
  data() {
    return {
      winHeight: "",
      data: ["个人就业登记", "失业登记", "失业登记注销", "信息变更"],
      checked: false,
      slKey: "", //保险金业务调转标识
      newObj: {
        rq: "",
        jsyzt: ""
      },
      user: {
        xm: "",
        sjhm: "",
        zjhm: "",
        xtsj: ""
      }
    };
  },
  methods: {
    link(data) {
      if (!this.checked) {
        this.$alert({ message: "请先阅读并同意!" });
        return;
      }
      this.$loading = true;
      this.$http
        .get("/jysydj/sfywbljl")
        .then(res => {
          const resData = res.returnData;
          if (resData.executeResult == 1) {
            if (res.returnData.sfywbljl == "1") {
              this.$alert(
                `您有未办结的就业失业相关业务，请等待业务办理结束后再办理${data}!`
              );
              return;
            }
            if (data == "失业登记注销") {
              this.$alert('已经办理了失业登记的劳动者，因入学、应征服兵役、移居境外或无求职意愿等原因，可申请注销失业登记。', ()=> {
                this.getSfkzxCx();
              });
            }
            if (data == "信息变更") {
              this.$alert('已办理就业登记或失业登记的劳动者，常住地址、文化程度等信息发生变化的，可变更相关信息。', ()=> {
                this.getJbxx();
              });
            }
            if (data == "个人就业登记") {
              this.$alert('通过创办企业（个体工商户），或灵活就业等方式实现就业的劳动者，可办理个人就业登记。', ()=> {
                this.$router.push({
                  path: "/baseData",
                  query: { dj: "1" }
                });
              });
            }
            if (data == "失业登记") {
              this.$alert('劳动年龄内，有劳动能力、有就业要求、目前处于无业状态的劳动者，可办理失业登记。', ()=> {
                this.$router.push({
                  path: "/baseData",
                  query: { dj: "2" }
                });
              });
            }
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    // 获取失业登记注销需要的信息
    getSfkzxCx() {
      this.$loading = true;
      this.$http({
        url: "/jysydj/sydjzx/sfkzxCx",
        method: "get"
      })
        .finally(() => {
          this.$loading = false;
        })
        .then(res => {
          let _res = res.returnData;
          if (+_res.executeResult == 1) {
            let syzxObj = {
              sydjid: _res.xxcx.sydjid, //失业登记id
              grbh: _res.xxcx.grbh, //个人编号
              sydjrq: _res.xxcx.sydjrq, //失业登记日期
              hjxzqh: _res.xxcx.hjxzqh //户籍地行政区划
            };
            sessionStorageSetItem("syzxObj", syzxObj);
            if (_res.xxcx.syrybz == "3") {
              // 失业登记注销
              this.$router.push({ path: "/sydjzx" });
            } else {
              this.$alert(_res.xxcx.sbyy, "我知道了");
            }
          } else {
            this.$alert({
              message: _res.message
            });
            return false;
          }
        });
    },
    search(type) {
      if (type == 1 || type == 2) {
        // 失业登记查询
        this.$router.push({ path: "/searchList", query: { type: type } });
      } else if (type == 3) {
        // 失业登记注销查询
        this.$router.push({ path: "/sydjzxDetail" });
      } else if (type == 4) {
        // 信息变更查询
        this.$router.push({ path: "/xxbgDetail" });
      }
    },
    GET_status() {
      this.$loading = true;
      this.$http
        .get("/jysydj/ryxxCx")
        .then(res => {
          const resData = res.returnData;
          if (resData.executeResult == 1) {
            Object.keys(this.user).forEach(item => {
              this.user[item] = resData.ryxx[item];
            });
          }
        })
        .finally(() => {
          this.$loading = false;
        });
      this.$http
        .get("/jysydj/jsyztCx")
        .then(res => {
          const resData = res.returnData;
          // this.slKey = sessionStorage.getItem("slKey"); //申领标识
          this.slKey = window.location.search.split('=')[1]; //申领标识
          if (resData.executeResult == 1) {
            this.newObj = resData.jsyzt;
            if (this.slKey == "1") {
              if (this.newObj.jsyzt) {
                this.data = ["失业登记", "信息变更"];
              } else {
                this.data = ["失业登记"];
              }
            }
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    //信息变更
    getJbxx() {
      this.$loading = true;
      this.$http
        .get("/jysydj/xxbg/getJbxx")
        .then(res => {
          const resData = res.returnData;
          if (resData.executeResult == 1) {
            if (resData.message) {
              this.$alert({
                message: resData.message || "操作成功！"
              });
            } else {
              this.$router.push({ path: "/xxbgData", query: resData.jbxx });
            }
          } else {
            this.$alert({
              message: resData.message || "操作成功！"
            });
          }
        })
        .finally(() => {
          this.$loading = false;
        });
    },
    //未办理数据
    GET_wbl() {
      // this.$loading = true;
      // this.$http
      //   .get("/jysydj/xxbg/getJbxx")
      //   .then(res => {
      //     const resData = res.returnData;
      //     if (resData.executeResult == 1) {
      // if (res.returnData.sfywbljl == "1") {
      // this.slKey = sessionStorage.getItem("slKey");  //申领标识
      // //就业登记、登记注销隐藏
      // if (this.slKey === '1') {
      //   this.data = [ "失业登记",  "信息变更"];
      // }
      // }
      //   }
      // })
      // .finally(() => {
      //   this.$loading = false;
      // });
    }
  },
  mounted() {
    // fix mobile height
    const eleHeight = this.$refs.index.offsetHeight || 0;
    const windowHeight = this.$store.state.winHeight;
    this.winHeight = `${Math.max(windowHeight, eleHeight)}px`;
  },
  created() {
    this.GET_status();
    // 隐藏home按钮
    this.$store.commit("SET_VISIBLE_ALL", false);
    // this.GET_wbl();
  }
};
</script>
<style lang="scss" scoped>
.container {
  color: #fff;
  /deep/ .weui-check__label:active {
    background-color: none;
  }
  .content {
    position: relative;
    padding: 126px 34px 0 34px;
    height: 622px;
    width: 100%;
    background: url("~common/images/index/banner.png") 0 92px no-repeat;
    background-size: 100% 416px;
    box-sizing: border-box;
    .conTitle {
      font-size: 42px;
      font-weight: 700;
      margin-bottom: 28px;
    }
    .conTxt {
      font-size: 26px;
      line-height: 38px;
      letter-spacing: 0px;
      span {
        font-size: 28px;
        font-weight: 800;
      }
    }
    .readOnly {
      height: 40px;
      line-height: 40px;
      margin-top: 10px;
      /deep/ .van-checkbox {
        height: 100%;
        span {
          color: #fff;
          font-size: 26px;
          height: 40px;
          line-height: 40px;
          margin-left: 12px;
        }
      }
      /deep/ .van-checkbox__icon {
        font-size: 28px;
      }
      /deep/ .van-checkbox__label {
        font-size: 32px;
        line-height: 1;
      }
    }
    .uerCar {
      width: 684px;
      height: 220px;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0px 6px 20px 0px rgba(8, 8, 61, 0.13);
      position: absolute;
      bottom: 26px;
      padding: 28px 34px;
      color: #333;
      font-size: 26px;
      box-sizing: border-box;
      .item_left {
        float: left;
        width: 100%;
        .name {
          font-size: 34px;
          height: 34px;
          line-height: 34px;
          margin-bottom: 22px;
        }
        .car,
        .phone {
          height: 20px;
          width: 450px;
          line-height: 20px;
          background: url("~common/images/index/zhengjian.png") 0 0 no-repeat;
          background-size: 20px;
          margin-bottom: 18px;
          padding-left: 40px;
        }
        .phone {
          background: url("~common/images/index/shouji.png") 0 0 no-repeat;
          background-size: 20px;
        }
        .newData {
          height: 30px;
          line-height: 30px;
          width: 100%;
        }
      }
      .item_right {
        position: absolute;
        right: 34px;
        height: 118px;
        width: 118px;
        background: url("~common/images/index/nan.png") 0 0 no-repeat;
        background-size: 118px;
      }
    }
    .car_lastH {
      height: 172px;
    }
  }
  .con_lastH {
    height: 572px;
  }
  .cont_link {
    .cont_title {
      padding: 0 34px;
      height: 68px;
      line-height: 68px;
      font-size: 34px;
      font-weight: 500;
      color: #333333;
    }
    .cont_item1,
    .cont_item2,
    .cont_item3,
    .cont_item4 {
      height: 178px;
      margin: 0 22px;
      padding: 42px 46px;
      box-sizing: border-box;
      p {
        margin-bottom: 10px;
        span {
          float: left;
          font-size: 34px;
          height: 34px;
          line-height: 34px;
          color: #333;
        }
        .rightAway {
          float: right;
          width: 146px;
          height: 50px;
          line-height: 50px;
          font-size: 25px;
          text-align: center;
          background: #06a8f6;
          border-radius: 26px;
          color: #fff;
        }
      }
      .linkList {
        height: 34px;
        line-height: 34px;
        font-size: 26px;
        color: #06a8f6;
      }
    }
    .cont_item1 {
      background: url("~common/images/index/item1.png") 0 0 no-repeat;
      background-size: 100%;
    }
    .cont_item2 {
      background: url("~common/images/index/item2.png") 0 0 no-repeat;
      background-size: 100%;
    }
    .cont_item3 {
      background: url("~common/images/index/item3.png") 0 0 no-repeat;
      background-size: 100%;
    }
    .cont_item4 {
      background: url("~common/images/index/item4.png") 0 0 no-repeat;
      background-size: 100%;
    }
  }
}
</style>
